<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>搜索后页面</title>
	<link rel="stylesheet" href="css/MyVideo.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

	<!-- 导入 Vue 3 -->
	<script src="//unpkg.com/vue@next"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
	<script src="js/jquery.params.js"></script>
	<style>
    .fakeimg {
        height: 200px;
         background: #aaa;
    }
	
  </style>
</head>
<body>
<div id="app" style="padding: 0%;width: 1521px;">
	<!-- 顶部导航栏 -->
	<nav class="">
	  <div class="container-fluid">
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>                        
	      </button>
	      <a class="navbar-brand" href="#" style="font-size: 150%;"><span class="glyphicon glyphicon-tree-deciduous"></span></a>
	    </div>
	    <div class="collapse navbar-collapse" id="myNavbar">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="main.html" style="font-size: 18px;text-shadow: black 1px 1px 1px;color: currentColor;">主页</a></li>
	        <li><a href="#" style="font-size: 18px;text-shadow: black 1px 1px 1px;color: currentColor;">番剧</a></li>
	        <li><a href="#" style="font-size: 18px;text-shadow: black 1px 1px 1px;color: currentColor;">直播</a></li>
	      </ul>
	    </div>
	  </div>
	</nav>
	<!-- 水平分割线 -->
		 <hr style="margin-top: 5px;border-width: 1px;border-color: #ccc;border-style: solid;">
		 <!-- 搜索框 -->
	<div class="row">
	    <div class="col-sm-12">
			 <form class="form-inline" role="form" style="padding-left: 30%;padding-top: 8px;">
		  	<div class="form-group">
		  		<label class="sr-only" for="name">名称</label>
		  		<input type="text" class="form-control" id="name" 
		  			   placeholder="搜索视频、动态" v-model="keyword" @keyup.enter="select" style="border-radius: 10px;width: 500px;height: 35px;">
		  	</div>
				 <input type="text" hidden="hidden">
		  	<button type="button" class="btn btn-default" style="background-color: cornflowerblue;" @click="select">
		  		<span class="glyphicon glyphicon-search" style="color: aliceblue;"></span>
		  	</button>
		  </form>
		</div>
	</div>
	<!-- 中间导航栏 -->
	<nav class="" style="margin-left: 20px;margin-top: 30px;">
	  <div class="container-fluid">
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar1">
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>                        
	      </button>
	    </div>
		
	    <div class="collapse navbar-collapse" id="myNavbar1">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="" style="color:black" @click="synthesize">综合排序</a></li>
	        <li><a href="#" style="color:black" @click="maxClick">最多点击</a></li>
	        <li><a href="#" style="color:black" @click="newTime">最新发布</a></li>
			<li><a href="#" style="color:black">最多弹幕</a></li>
			<li><a href="#" style="color:black" @click="maxCollect">最多收藏</a></li>
	      </ul>
	    </div>
	  </div>
	</nav>
	<!-- 水平分割线 -->
		 <hr style="margin-top: 5px;"/>
	<div style="padding-left: 85px;padding-right: 50px">
		<div>
			<span style="display: inline-block;padding-right: 15px;padding-top: 10px" v-for="(item,index) in result.records" :key="item.vid">
				<a :href="'view.html?vid='+item.vid" target="_blank" @click="collect(item.vid)">
					<div class="video" style="width: 180px;height: 150px;position: absolute;"></div>
					<input type="image" :src="item.vcover" width="180" height="150" style="border-radius: 10px"><br>
					<div style="width: 180px;height: 50px">{{ item.vtitle }}</div>
					<div style="font-size: 5px;padding-top: 10px;height: 20px;width: 180px;display: inline-block">
						<span style="padding-right: 15px;height: 20px">
							<input type="image" src="img/img_6.png" width="20" height="20">
							{{item.vcount}}
						</span>
						<span style="padding-right: 20px;height: 20px">
							<input type="image" src="img/img_2.png" width="20" height="20" style="border-radius: 10px">
							{{item.vcollect}}
						</span>

						<span style="height: 20px">
							{{ item.vuptime }}
						</span>

					</div>
				</a>
			</span>
		</div>

	</div>
			 
	<!--让id="paging"的div居中，并位于页面底部：-->
	<div id="paging" style="text-align:center;position:fixed;bottom:0;width:100%;">
	    <ul class="pagination">
	        <li><a href="javascript:void(0)" class="page" data-page="1" @click="firstPage">首页</a></li>
	        <li><a href="javascript:void(0)" class="page" data-page="2" @click="prePage">上一页</a></li>
	        <li><a href="javascript:void(0)" class="page" data-page="3" @click="nextPage">下一页</a></li>
	        <li><a href="javascript:void(0)" class="page" data-page="4" @click="endPage">尾页</a></li>
	    </ul>
	</div>
</div>
</body>
<script>
	Vue.createApp({
		data(){
			return{
				keyword:'',
				pageNow:1,
				pageSize:28,
				result:{},
				flag:0    //默认排序
			}
		},
		created(){
			this.getResult()
		},
		methods:{
			getResult(){
				this.keyword=$.query.get('keyword')
				document.title=this.keyword+'_搜索'   //页面标题动态化
				axios({
				    method:'post',
				    url:`/video/select`,
				    params:{
				        search:this.keyword,
				        current:this.pageNow,
				        limit:this.pageSize,
						flag: this.flag
				    }
				}).then(response => {
					this.result=response.data.data
				})
			},
			select(){
				if (this.keyword.trim().length===0){
					window.location='ssym.html'
					//layer.msg('请输入搜索内容')
				}else {
					window.location="ssym.html?keyword="+this.keyword
				}
			},
			nextPage(){
				if (this.pageNow===this.result.pages){
					layer.msg('当前为最后一页')
				}else {
					this.pageNow++
					this.getResult()
				}
			},
			prePage(){
				this.pageNow--
				if (this.pageNow>0 && this.pageNow<this.result.pages){
					this.getResult()
				}else {
					layer.msg('当前为第一页')
					this.pageNow=1
				}
			},
			firstPage(){
				if (this.pageNow!==1){
					this.pageNow=1
					this.getResult()
				}else {
					layer.msg('当前为第一页')
				}
			},
			endPage(){
				if (this.pageNow!==this.result.pages){
					this.pageNow=this.result.pages
					this.getResult()
				}else {
					layer.msg('当前为最后一页')
				}
			},
			maxClick(){
				this.flag=1
				this.pageNow=1
				this.getResult()
			},
			newTime(){
				this.flag=3
				this.pageNow=1
				this.getResult()
			},
			maxCollect(){
				this.flag=2
				this.pageNow=1
				this.getResult()
			},
			synthesize(){
				this.flag=0  //默认排序
				this.pageNow=1
				this.getResult()
			},
			collect(vid){
				if (JSON.parse(localStorage.getItem("person"))!=null){
					let person=JSON.parse(localStorage.getItem("person"))
					axios({
						method:'post',
						url:`/history/add`,
						params:{
							vid:vid,
							uid:person.uid
						}
					})
				}
			}
		}
	}).mount("#app")
</script>

</html>